<template>
  <div>
    <en-table-layout :tableData="tableData" :height="tableHeight" :loading="loading">
      <div slot="toolbar" class="inner-toolbar">
        <div class="toolbar-btns">
          <div>
            <el-button size="mini" type="primary" @click="handleAddTask">新增任务</el-button>
          </div>
          <div class="toolbar-search">
            <!-- 顶部搜索栏 -->
            <en-table-search
              @search="searchEvent"
              @advancedSearch="advancedSearchEvent"
              advanced
              advancedWidth="455"
              placeholder="请输入任务名称">
              <template slot="advanced-content">
                <el-form ref="advancedForm" :model="advancedForm"  label-width="80px">   
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="任务名称">
                        <el-input v-model="advancedForm.mission_name" placeholder="请输入任务名称" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>      
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="时间:">
                        <el-date-picker
                          clearable
                          v-model="advancedForm.times_range"
                          type="datetimerange"
                          align="center"
                          :editable="false"
                          unlink-panels
                          range-separator="-"
                          :default-time="['00:00:00', '23:59:59']"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>  
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="奖励方式">
                        <el-select v-model="advancedForm.rewards_type" placeholder="请选择奖励方式" clearable>
                          <el-option label="现金红包" :value="0"></el-option>
                          <el-option label="平台代金券" :value="1"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>       
                </el-form>
              </template>
            </en-table-search>
          </div>     
        </div>
      </div>
      <template slot="table-columns">
        <el-table-column type="selection" min-width="10" />
        <el-table-column prop="mission_name" label="任务名称" min-width="120" >
          <template slot-scope="{ row }">
            <span>{{ row.mission_name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="mission_subtitle" label="副标题" min-width="120" />
        <el-table-column prop="mission_status" label="活动状态" min-width="120">
          <template slot-scope="{ row }">
            <el-tag :type="row.mission_status == 1 ? '' : row.mission_status == 3 ? 'warning' : 'success'">{{ row.mission_status == 1 ? '待上线' : row.mission_status == 3 ? '未上线' : '已上线' }}</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="mission_status" label="任务明细" min-width="120" /> -->
        <el-table-column label="任务明细" min-width="120">
          <template slot-scope="{ row }">
            <el-button type="primary" round size="mini" @click="handleTaskDetailed(row)">管理任务</el-button>
          </template>
        </el-table-column>             
        <el-table-column label="任务进展" min-width="120">
          <template slot-scope="{ row }">
            <el-button type="success" round size="mini" @click="handleTaskProgress()">查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="奖励明细" min-width="120">
          <template slot-scope="{ row }">
            <el-button type="primary" round size="mini" @click="handleTaskReward()">奖励明细</el-button>
          </template>
        </el-table-column>        
        <el-table-column prop="start_time" label="开始时间" min-width="180" >
          <template slot-scope="{ row }">
            <span>{{ row.start_time | unixToDate('yyyy-MM-dd hh:mm:ss') }}</span>
          </template>  
        </el-table-column>   
        <el-table-column prop="end_time" label="结束时间" min-width="180" >
          <template slot-scope="{ row }">
            <span>{{ row.end_time | unixToDate('yyyy-MM-dd hh:mm:ss') }}</span>
          </template>  
        </el-table-column>    
        <el-table-column label="活动封面" min-width="220">
          <template slot-scope="{ row }">
            <div class="table-img">
              <img :src="row.cover_img" alt="" @click="handleEnlarge(row.cover_img)" />
            </div>
          </template>
        </el-table-column>  
        <el-table-column label="活动背景" min-width="220">
          <template slot-scope="{ row }">
            <div class="table-img">
              <img :src="row.background_img" alt="" @click="handleEnlarge(row.background_img)" />
            </div>
          </template>
        </el-table-column> 
        <el-table-column prop="mission_desc" label="任务描述" min-width="150" />    
        <el-table-column prop="create_time" label="创建时间" min-width="150">
          <template slot-scope="{ row }">
            <span>{{ row.create_time | unixToDate('yyyy-MM-dd hh:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_name" label="创建人" min-width="120" />    
        <el-table-column prop="update_time" label="修改时间" min-width="150">
          <template slot-scope="{ row }">
            <span>{{ row.update_time | unixToDate('yyyy-MM-dd hh:mm:ss') }}</span>
          </template>
        </el-table-column>    
        <el-table-column prop="update_name" label="修改人" min-width="120" />                                                                                                                             
        <el-table-column label="操作" width="220" fixed="right">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" @click="handleEdit(row)">修改</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row.id)">删除</el-button>
            <el-button v-if="row.mission_status == 3 || row.mission_status == 1" size="mini" type="success" @click="handleOnOff(2, row.id)">上线</el-button>
            <el-button v-else size="mini" type="warning" @click="handleOnOff(3, row.id)">下线</el-button>
          </template>
        </el-table-column>
      </template>

      <el-pagination v-if="tableData" slot="pagination"
        @size-change="handlePageSizeChange" @current-change="handlePageCurrentChange"
        :current-page="params.page_no" :page-sizes="[10, 20, 50, 100]" :page-size="params.page_size"
        layout="total, sizes, prev, pager, next, jumper" :total="data_total">
      </el-pagination>
    </en-table-layout>
    <!-- 放大图片 -->
    <el-dialog width="600px" :visible.sync="imgDialog">
      <img :src="enlargeImg" alt="" style="width:100%;height:100%;">
    </el-dialog>
    <!-- 添加任务 -->
    <el-dialog :title="addTaskForm.title" width="600px" :visible.sync="addTaskDialog" :close-on-click-modal="false">
      <el-form
        ref="addTaskForm"
        :model="addTaskForm"
        :rules="addTaskRulesForm"
        label-width="90px">
        <el-row>
          <el-col :span="24">
            <el-form-item prop="mission_name" label="任务标题">
              <el-input v-model="addTaskForm.mission_name" placeholder="请输入任务标题" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="mission_subtitle" label="副标题">
              <el-input v-model="addTaskForm.mission_subtitle" placeholder="请输入副标题" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="时间" prop="times_range">
              <el-date-picker
                clearable
                v-model="addTaskForm.times_range"
                type="datetimerange"
                align="center"
                :editable="false"
                unlink-panels
                range-separator="-"
                :default-time="['00:00:00', '23:59:59']"
                start-placeholder="开始时间"
                end-placeholder="结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动封面">
              <el-upload
                class="avatar-uploader"
                :action="MixinUploadApi"
                :show-file-list="false"
                :on-success="handleCoverSuccess">
                <img v-if="coverUrl" :src="coverUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动背景">
              <el-upload
                class="avatar-uploader"
                :action="MixinUploadApi"
                :show-file-list="false"
                :on-success="handleBackGroundSuccess">
                <img v-if="backgroundUrl" :src="backgroundUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="rewards_type" label="奖励方式">
              <el-radio-group v-model="addTaskForm.rewards_type">
                <!-- <el-radio :label="0">现金红包</el-radio> -->
                <el-radio :label="1">平台代金券</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="mission_desc" label="任务说明">
              <el-input type="textarea" v-model="addTaskForm.mission_desc" placeholder="请输入任务说明" :autosize="{ minRows: 5, maxRows: 6}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleAddTaskFormCancel('addTaskForm')">取 消</el-button>
        <el-button type="primary" @click="handleAddTaskFormSubmit('addTaskForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 管理任务 -->
    <el-dialog title="添加任务" width="600px" :visible.sync="ManagementTasksDialog">
      <el-form
        ref="ManagementTaskForm"
        :model="ManagementTaskForm"
        :rules="ManagementTaskRulesForm"
        label-width="90px">
        <el-row class="task">
          <el-col>
              <el-checkbox v-model="everyDayTask" @change="handleEveryDayTask">每日任务</el-checkbox>
          </el-col>
        </el-row>
        <template v-if="showEveryDay">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="任务指标" prop="day_mission_detail.mission_target">
                <el-select v-model="ManagementTaskForm.day_mission_detail.mission_target" placeholder="请选择任务指标" clearable @change="handleSelectResult($event)">
                  <el-option label="下单人数" value="0"></el-option>
                  <el-option label="成交金额" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="任务阶梯1" prop="day_mission_detail.level1_target">
                <!-- <el-input-number v-model="ManagementTaskForm.day_mission_detail.level1_target" controls-position="right" placeholder="请输入任务阶梯1" :max="10000"></el-input-number> -->
                <el-input v-model="ManagementTaskForm.day_mission_detail.level1_target" type="number" min="1" clearable placeholder="请输入任务阶梯1">
                  <template slot="append">
                    <span v-if="showSplicingEnding">人</span>
                    <span v-else>元</span>
                  </template>
                </el-input> 
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="奖励1" :prop="rewardState ? 'day_mission_detail.level1_cash' : 'day_mission_detail.level1_coupon_id'">
                <template v-if="rewardState">
                  <el-input v-model="ManagementTaskForm.day_mission_detail.level1_cash" placeholder="请输入奖励1" clearable></el-input>
                </template>
                <template v-else>
                  <el-select v-model="ManagementTaskForm.day_mission_detail.level1_coupon_id" @change="handleDayLevel1Coupon($event)" clearable placeholder="请选择优惠卷">
                    <el-option v-for="(item, index) in couponType" :label="item.label" :value="item.value" :key="index" ></el-option>
                  </el-select>
                </template> 
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="任务阶梯2" prop="day_mission_detail.level2_target">
                <el-input v-model="ManagementTaskForm.day_mission_detail.level2_target" clearable type="number" min="1" placeholder="请输入任务阶梯2">
                  <template slot="append">
                    <span v-if="showSplicingEnding">人</span>
                    <span v-else>元</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="奖励2" :prop="rewardState ? 'day_mission_detail.level2_cash' : 'day_mission_detail.level2_coupon_id'">
                <template v-if="rewardState">
                  <el-input v-model="ManagementTaskForm.day_mission_detail.level2_cash" clearable placeholder="请输入奖励2"></el-input>
                </template>
                <template v-else>
                  <el-select v-model="ManagementTaskForm.day_mission_detail.level2_coupon_id" clearable @change="handleDayLevel2Coupon($event)" placeholder="请选择优惠卷">
                    <el-option v-for="(item, index) in couponType" :label="item.label" :value="item.value" :key="index"></el-option>
                  </el-select>
                </template> 
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="任务阶梯3" prop="level3_target">
                <el-input v-model="ManagementTaskForm.day_mission_detail.level3_target" clearable type="number" min="1" placeholder="请输入任务阶梯3">
                  <template slot="append">
                    <span v-if="showSplicingEnding">人</span>
                    <span v-else>元</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="奖励3" prop="level3_cash">
                <template v-if="rewardState">
                  <el-input v-model="ManagementTaskForm.day_mission_detail.level3_cash" clearable placeholder="请输入奖励3"></el-input>
                </template>
                <template v-else>
                  <el-select v-model="ManagementTaskForm.day_mission_detail.level3_coupon_id" clearable @change="handleDayLevel3Coupon($event)" placeholder="请选择优惠卷">
                    <el-option v-for="(item, index) in couponType" :label="item.label" :value="item.value" :key="index"></el-option>
                  </el-select>
                </template>
              </el-form-item>
            </el-col>
          </el-row>     
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="任务阶梯4" prop="level4_target">
                <el-input v-model="ManagementTaskForm.day_mission_detail.level4_target" clearable type="number" min="1" placeholder="请输入任务阶梯4">
                  <template slot="append">
                    <span v-if="showSplicingEnding">人</span>
                    <span v-else>元</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="奖励4" prop="level4_cash">
                <template v-if="rewardState">
                  <el-input v-model="ManagementTaskForm.day_mission_detail.level4_cash" clearable placeholder="请输入奖励4"></el-input>
                </template>
                <template v-else>
                  <el-select v-model="ManagementTaskForm.day_mission_detail.level4_coupon_id" clearable @change="handleDayLevel4Coupon($event)" placeholder="请选择优惠卷">
                    <el-option v-for="(item, index) in couponType" :label="item.label" :value="item.value" :key="index"></el-option>
                  </el-select>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template v-if="showEveryMonth">
          <el-row class="task">
            <el-col>
                <el-checkbox v-model="everyMonthTask" @change="handleEveryMonthTask" clearable>每月任务</el-checkbox>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="任务指标" prop="month_mission_detail.mission_target">
                <el-select v-model="ManagementTaskForm.month_mission_detail.mission_target" placeholder="请选择任务指标" clearable>
                  <el-option label="下单人数" value="0"></el-option>
                  <el-option label="成交金额" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="任务阶梯1" prop="month_mission_detail.level1_target">
                <el-input v-model="ManagementTaskForm.month_mission_detail.level1_target" clearable type="number" min="1" placeholder="请输入任务阶梯1">
                  <template slot="append">
                    <span v-if="showMonthSplicingEnding">人</span>
                    <span v-else>元</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="奖励1" :prop="rewardState ?  'month_mission_detail.level1_cash' : 'month_mission_detail.level1_coupon_id'">
                <template v-if="rewardState">
                  <el-input v-model="ManagementTaskForm.month_mission_detail.level1_cash" clearable placeholder="请输入奖励1"></el-input>
                </template>
                <template v-else>
                  <el-select v-model="ManagementTaskForm.month_mission_detail.level1_coupon_id" clearable @change="handleMonthLevel1Coupon($event)" placeholder="请选择优惠卷">
                    <el-option v-for="(item, index) in couponType" :label="item.label" :value="item.value" :key="index"></el-option>
                  </el-select>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="任务阶梯2" prop="month_mission_detail.level2_target">
                <el-input v-model="ManagementTaskForm.month_mission_detail.level2_target" clearable type="number" min="1" placeholder="请输入任务阶梯2">
                  <template slot="append">
                    <span v-if="showMonthSplicingEnding">人</span>
                    <span v-else>元</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="奖励2" :prop="rewardState ? 'month_mission_detail.level2_cash' :  'month_mission_detail.level2_coupon_id'">
                <template v-if="rewardState">
                  <el-input v-model="ManagementTaskForm.month_mission_detail.level2_cash" clearable placeholder="请输入奖励2"></el-input>
                </template>
                <template v-else>
                  <el-select v-model="ManagementTaskForm.month_mission_detail.level2_coupon_id" clearable @change="handleMonthLevel2Coupon($event)" placeholder="请选择优惠卷">
                    <el-option v-for="(item, index) in couponType" :label="item.label" :value="item.value" :key="index"></el-option>
                  </el-select>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="任务阶梯3" prop="level3_target">
                <el-input v-model="ManagementTaskForm.month_mission_detail.level3_target" clearable type="number" min="1" placeholder="请输入任务阶梯3">
                  <template slot="append">
                    <span v-if="showMonthSplicingEnding">人</span>
                    <span v-else>元</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="奖励3" prop="leve3_coupon_id">
                <template v-if="rewardState">
                  <el-input v-model="ManagementTaskForm.month_mission_detail.level3_cash" clearable placeholder="请输入奖励3"></el-input>
                </template>
                <template v-else>
                  <el-select v-model="ManagementTaskForm.month_mission_detail.level3_coupon_id" clearable @change="handleMonthLevel3Coupon($event)"  placeholder="请选择优惠卷">
                    <el-option v-for="(item, index) in couponType" :label="item.label" :value="item.value" :key="index"></el-option>
                  </el-select>
                </template>
              </el-form-item>
            </el-col>
          </el-row>     
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="任务阶梯4" prop="level4_target">
                <el-input v-model="ManagementTaskForm.month_mission_detail.level4_target" clearable type="number" min="1" placeholder="请输入任务阶梯4">
                  <template slot="append">
                    <span v-if="showMonthSplicingEnding">人</span>
                    <span v-else>元</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="奖励4" prop="level4_coupon_id">
                <template v-if="rewardState">
                  <el-input v-model="ManagementTaskForm.month_mission_detail.level4_cash" clearable placeholder="请输入奖励4"></el-input>
                </template>
                <template v-else>
                  <el-select v-model="ManagementTaskForm.month_mission_detail.level4_coupon_id" clearable @change="handleMonthLevel4Coupon($event)" placeholder="请选择优惠卷">
                    <el-option v-for="(item, index) in couponType" :label="item.label" :value="item.value" :key="index"></el-option>
                  </el-select>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
        </template>                              
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary"  @click="submitForm('ManagementTaskForm')">保 存 设 置</el-button>
        <el-button size="small" @click="handleCancel('ManagementTaskForm')">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as API_Leader from '@/api/leader.js';
import * as API_Coupon from '@/api/coupon.js';

export default {
  name: 'leaderTask',
  data() {
    return {
      advancedForm: {
        times_range: [],
        start_time: undefined,
        end_time: undefined,
        mission_name: undefined,
        rewards_type: undefined
      },
      /** 列表loading状态 */
      loading: false,
      tableData: [],
      /** 列表参数 */
      params: {
        page_no: 1,
        page_size: 10
      },
      data_total: 0,
      everyMonthTask: true,
      everyDayTask: true,
      /** 奖励的形式 */
      rewardState: true,
      /** 放大后的图片显示 */
      enlargeImg: undefined,
      addTaskForm: {
        title: '',
        id: undefined,
        mission_name: undefined,
        mission_subtitle: undefined,
        cover_img: undefined,
        background_img: undefined,
        times_range: [],
        start_time: undefined,
        end_time: undefined,
        rewards_type: 1,
        mission_desc: undefined,
        mission_status: 1
      },
      /** 活动背景 */
      backgroundUrl: undefined,
      /** 活动封面 */
      coverUrl: undefined,
      /** 放大图片弹框 */
      imgDialog: false,
      /** 添加任务弹框 */
      addTaskDialog: false,
      /** 管理任务弹框 */
      ManagementTasksDialog: false,
      list: [],
      addTaskRulesForm: {
        mission_name: {
          required: true,
          message: '任务标题不能为空',
          trigger: 'blur'
        },
        mission_subtitle: {
          required: true,
          message: '副标题不能为空',
          trigger: 'blur'
        },
        times_range: [
          {
            type: 'array', 
            required: true,
            trigger: 'change',
            message: '截止日期不能为空'
          }
        ],
        rewards_type: [
          {
            required: true,
            message: '奖励方式不能为空',
            trigger: 'blur'
          }
        ]
      },
      ManagementTaskForm: {
        day_mission_detail: {
          mission_target: '0',
          level1_target: '',
          level1_cash: '',
          level1_coupon_id: '',
          level2_target: '',
          level2_cash: '',
          level2_coupon_id: '',
          level3_target: '',
          level3_cash: '',
          level3_coupon_id: '',
          level4_target: '',
          level4_cash: '',
          level4_coupon_id: '',
          mission_id: '',
          mission_type: '0'
        },
        month_mission_detail: {
          mission_target: '0',
          level1_target: '',
          level1_cash: '',
          level1_coupon_id: '',
          level2_target: '',
          level2_cash: '',
          level2_coupon_id: '',
          level3_target: '',
          level3_cash: '',
          level3_coupon_id: '',
          level4_target: '',
          level4_cash: '',
          level4_coupon_id: '',
          mission_id: '',
          mission_type: '1'
        }
      },
      ManagementTaskRulesForm: {
        day_mission_detail: {
          mission_target: {
            required: true,
            message: '任务指标不能为空',
            trigger: 'blur'
          },
          level1_target: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          level1_cash: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          level1_coupon_id: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },  
          level2_target: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          level2_cash: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          level2_coupon_id: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }    
        },
        month_mission_detail: {
          mission_target: {
            required: true,
            message: '任务指标不能为空',
            trigger: 'blur'
          },
          level1_target: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          level1_cash: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          level1_coupon_id: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },  
          level2_target: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          level2_cash: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          level2_coupon_id: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        }
      },
      couponType: [],
      couponData: [],
      /** 是否显示每日的任务 */
      showEveryDay: true,
      /** 是否显示每月的任务 */
      showEveryMonth: true,
      /** 根据下拉框的结尾来判断每日要显示的展示字段 */
      showSplicingEnding: true,
      /** 根据下拉框的结尾来判断月份要显示的展示字段 */
      showMonthSplicingEnding: true
    }
  },
  computed: {
    tableHeight (){
      /** 计算表格页面的高低 */
      return document.documentElement.clientHeight - 246 + 'px';
    }
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    /**
      * @date 2021/01/26
      * @author kaiqiang
      * @description { 获取页面数据 }
    */
    getDataList() {
      this.loading = true
      API_Leader.getDistributionMission(this.params)
        .then(response => {
          this.tableData = response.data;
          this.data_total = response.data_total;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
          console.log(error)
        })
    },
    /**
      * @date 2021/01/26
      * @author kaiqiang
      * @description { 请求优惠卷列表 }
    */
    getCouponList() {
      let params = {
        'coupon_type': 'MARKETING_VOUCHER'
      }
      API_Coupon.getCouponsTypeList(params)
        .then(response => {
          let data = response;
          this.couponData = response;
          for (let i = 0; i < data.length; i++) {
            let label = data[i].title;
            let value = data[i].coupon_id;
            let item = data[i];
            item['label'] = label;
            item['value'] = value;
            this.couponType = data;
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    /** 分页大小发生改变 */
    handlePageSizeChange(size) {
      this.params.page_size = size;
      this.getDataList();
    },
    /** 分页页数发生改变 */
    handlePageCurrentChange(page) {
      this.params.page_no = page;
      this.getDataList();
    },
    /**
      * @date 2021/01/21
      * @author kaiqiang
      * @description { 新增任务 }
    */
    handleAddTask() {
      this.addTaskForm.title = '添加';
      this.addTaskDialog = true;
      this.$refs['addTaskForm'].resetFields();
      this.backgroundUrl = undefined;
      this.coverUrl = undefined; 
    },
    /**
      * @date 2021/01/27
      * @author kaiqiang
      * @description { 搜索 }
    */
    searchEvent(data) {
      this.params = {
        ...this.params,
        keyword: data
      };
      this.params.page_no = 1;
      this.getDataList();
    },
    /**
      * @date 2021/01/27
      * @author kaiqiang
      * @description { 高级搜索 }
    */
    advancedSearchEvent(data) {
      if (this.advancedForm.times_range.length > 0) {
        this.advancedForm.start_time = this.advancedForm.times_range[0].getTime() / 1000;
        this.advancedForm.end_time = this.advancedForm.times_range[1].getTime() / 1000;
      }
      this.params = {
        ...this.params,
        ...this.advancedForm
      }
      this.params.page_no = 1;
      this.getDataList();
    },
    /**
      * @date 2021/01/26
      * @author kaiqiang
      * @description { 显示活动封面的图片 }
    */
    handleCoverSuccess(file) {
      this.addTaskForm.cover_img = file.url;
      this.coverUrl = file.url
    },
    /**
      * @date 2021/01/26
      * @author kaiqiang
      * @description { 显示活动背景的图片 }
    */
    handleBackGroundSuccess(file) {
      this.addTaskForm.background_img = file.url;
      this.backgroundUrl = file.url;
    },    
    /**
      * @date 2021/01/26
      * @author kaiqiang
      * @description { 显示放大后的图片 }
    */
    handleEnlarge(url) {
      this.enlargeImg = url;
      this.imgDialog = true;
    },
    /**
      * @date 2021/01/22
      * @author kaiqiang
      * @description { 添加团长任务的确实事件 }
    */
    handleAddTaskFormSubmit(addTaskForm) {
      if (this.addTaskForm.times_range && this.addTaskForm.times_range.length > 0) {
        this.addTaskForm.start_time = this.addTaskForm.times_range[0].getTime() / 1000;
        this.addTaskForm.end_time = this.addTaskForm.times_range[1].getTime() / 1000;
      }
      if (!this.addTaskForm.id) {
        this.$refs[addTaskForm].validate(valide => {
          if (valide) {
            API_Leader.addDistributionMission(this.addTaskForm)
              .then(response => {
                this.addTaskDialog = false;
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                })
                this.$refs[addTaskForm].resetFields();
                this.addTaskForm.times_range = [];
                this.getDataList();
              })
              .catch(error => {
                console.log(error)
              })
          }
        })
      } else {
        this.$refs[addTaskForm].validate(valide => {
          if (valide) {
            API_Leader.updateDistributionMission(this.addTaskForm)
              .then(response => {
                this.addTaskDialog = false;
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                })
                this.$refs[addTaskForm].resetFields();
                this.addTaskForm.times_range = [];
                this.getDataList();
              })
              .catch(error => {
                console.log(error)
              })
          }
        })
      }
    },
    /**
      * @date 2021/01/23
      * @author kaiqiang
      * @description {添加团长任务的取消事件}
    */
    handleAddTaskFormCancel(addTaskForm) {
      this.addTaskDialog = false;
      this.$refs[addTaskForm].resetFields();
      this.addTaskForm.times_range = [];
    },    
    /**
      * @date 2021/01/26
      * @author kaiqiang
      * @description { 删除团长任务 }
    */
    handleDelete(id) {
      let params = {
        'mission_id': id
      }
      this.$confirm("确定要执行此操作吗?")
        .then(_ => {
          API_Leader.deleteDistributionMission(params)
            .then(response => {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.getDataList();
            })
            .catch(error => {
              console.log(error)
            })
        })
        .catch(_ => {
          this.$message({
            type: 'warning',
            message: '操作取消!'
          })
        })
    },
    /**
      * @date 2021/01/26
      * @author kaiqiang
      * @description { 修改团长任务 }
    */
    handleEdit(row) {
      console.log(row)
      let start_times = new Date(row.start_time * 1000);
      let end_times = new Date(row.end_time * 1000);
      this.addTaskDialog = true;
      this.coverUrl = row.cover_img;
      this.backgroundUrl = row.background_img;
      this.addTaskForm = row;
      this.addTaskForm.times_range = [start_times, end_times];
      this.addTaskForm.title = '修改';
    },
    /**
      * @date 2021/01/22
      * @author kaiqiang
      * @description { 管理明细点击事件 }
    */
    handleTaskDetailed(data) {
      this.ManagementTasksDialog = true;
      API_Leader.getMissionDetailByMisId(data.id)
        .then(response => {
          console.log(response)
          this.ManagementTaskForm = response;
          this.ManagementTaskForm.day_mission_detail.mission_type = '0';
          this.ManagementTaskForm.month_mission_detail.mission_type = '1';
          this.ManagementTaskForm.day_mission_detail.mission_target = response.day_mission_detail.mission_target ? response.day_mission_detail.mission_target + '' : '0';
          this.ManagementTaskForm.month_mission_detail.mission_target = response.month_mission_detail.mission_target ? response.month_mission_detail.mission_target + '' : '1';
          this.ManagementTaskForm.day_mission_detail.mission_id = data.id;
          this.ManagementTaskForm.month_mission_detail.mission_id = data.id;
          if (response.day_mission_detail.mission_target === '0') {
            this.showSplicingEnding = true;
          } else {
            this.showSplicingEnding = false;
          }
          if (response.month_mission_detail.mission_target === '0') {
            this.showMonthSplicingEnding = true;
          } else {
            this.showMonthSplicingEnding = false;
          }
        })
        .catch(error => {
          console.log(error)
        })
      this.getCouponList();
      if (data.rewards_type === 1) {
        this.rewardState = false;
      } else {
        this.rewardState = true;
      }
    },
    /**
      * @date 2021/01/26
      * @author kaiqiang
      * @description { 每天的点击事件 }
    */
    handleEveryDayTask(boolen) {
      if (boolen) {
        this.showEveryDay = true;
        this.ManagementTaskRulesForm.day_mission_detail = {
          mission_target: {
            required: true,
            message: '任务指标不能为空',
            trigger: 'blur'
          },
          level1_target: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          level1_cash: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          level1_coupon_id: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },  
          level2_target: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          level2_cash: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          level2_coupon_id: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }  
        }
      } else {
        this.showEveryDay = false;
        this.ManagementTaskRulesForm.day_mission_detail = {
          mission_target: {
            required: false,
            message: '任务指标不能为空',
            trigger: 'blur'
          },
          level1_target: {
            required: false,
            message: '不能为空',
            trigger: 'blur'
          },
          level1_cash: {
            required: false,
            message: '不能为空',
            trigger: 'blur'
          },
          level1_coupon_id: {
            required: false,
            message: '不能为空',
            trigger: 'blur'
          },  
          level2_target: {
            required: false,
            message: '不能为空',
            trigger: 'blur'
          },
          level2_cash: {
            required: false,
            message: '不能为空',
            trigger: 'blur'
          },
          level2_coupon_id: {
            required: false,
            message: '不能为空',
            trigger: 'blur'
          }
        }
      }
    },
    /**
      * @date 2021/01/26
      * @author kaiqiang
      * @description { 每月的点击事件 }
    */
    handleEveryMonthTask(boolen) {
      if (boolen) {
        this.showEveryMonth = true;
        this.ManagementTaskRulesForm.month_mission_detail = {
          mission_target: {
            required: true,
            message: '任务指标不能为空',
            trigger: 'blur'
          },
          level1_target: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          level1_cash: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          level1_coupon_id: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },  
          level2_target: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          level2_cash: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          },
          level2_coupon_id: {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }  
        }
      } else {
        this.showEveryMonth = false;
        this.ManagementTaskRulesForm.month_mission_detail = {
          mission_target: {
            required: false,
            message: '任务指标不能为空',
            trigger: 'blur'
          },
          level1_target: {
            required: false,
            message: '不能为空',
            trigger: 'blur'
          },
          level1_cash: {
            required: false,
            message: '不能为空',
            trigger: 'blur'
          },
          level1_coupon_id: {
            required: false,
            message: '不能为空',
            trigger: 'blur'
          },  
          level2_target: {
            required: false,
            message: '不能为空',
            trigger: 'blur'
          },
          level2_cash: {
            required: false,
            message: '不能为空',
            trigger: 'blur'
          },
          level2_coupon_id: {
            required: false,
            message: '不能为空',
            trigger: 'blur'
          }          
        }
      }
    },
    /**
      * @date 2021/01/26
      * @author kaiqiang
      * @description { 添加任务详情 }
    */
    submitForm() {
      this.$refs['ManagementTaskForm'].validate(valide => {
        if (valide) {
          API_Leader.addDistributionCreateMissionDetails(this.ManagementTaskForm)
            .then(response => {
              this.$message({
                type: 'success',
                message: '操作成功!' 
              })
              this.ManagementTasksDialog = false;
              this.$refs['ManagementTaskForm'].resetFields();
            })
            .catch(error => {
              console.log(error)
            })
        }
      })
    },
    /**
      * @date 2021/01/26
      * @author kaiqiang
      * @description { 处理上下线 }
    */
    handleOnOff(state, id) {
      this.$confirm("确定要执行此操作吗?", { type: 'warning' })
        .then(_ => {
          API_Leader.onOffDistributionMission(state, id)
            .then(response => {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.getDataList();
            })
            .catch(error => {
              console.log(error)
            })
        })
        .catch(_ => {
          this.$message({
            type: 'warning',
            message: '操作已取消!'
          })
        })
    },
    /**
      * @date 2021/01/26
      * @author kaiqiang
      * @description { 任务详情取消 }
    */
    handleCancel(ManagementTaskForm) {
      this.ManagementTasksDialog = false;
      this.$refs['ManagementTaskForm'].resetFields();
    },
    /**
      * @date 2021/01/25
      * @author kaiqiang
      * @description { 任务进展 }
    */
    handleTaskProgress() {
      this.$router.push({ path: 'task-progress' });
    },
    handleTaskReward() {
      this.$router.push({ path: 'task-reward' });
    },
    /**
      * @date 2021/01/27
      * @author kaiqiang
      * @description { 监听下拉框的事件 }
    */
    /** 每日任务一 */
    handleDayLevel1Coupon(event, item) {
      let index = this.indexOf(this.couponType, event);
      this.ManagementTaskForm.day_mission_detail.level1_cash = this.couponData[index].coupon_price;
    },
    /** 每日任务二 */
    handleDayLevel2Coupon(event, item) {
      let index = this.indexOf(this.couponType, event);
      this.ManagementTaskForm.day_mission_detail.level2_cash = this.couponData[index].coupon_price;
    },
    /** 每日任务三 */
    handleDayLevel3Coupon(event, item) {
      let index = this.indexOf(this.couponType, event);
      this.ManagementTaskForm.day_mission_detail.level3_cash = this.couponData[index].coupon_price;
    },
    /** 每日任务四 */
    handleDayLevel4Coupon(event, item) {
      let index = this.indexOf(this.couponType, event);
      this.ManagementTaskForm.day_mission_detail.level4_cash = this.couponData[index].coupon_price;
    },
    /** 每月任务一 */ 
    handleMonthLevel1Coupon(event, item) {
      let index = this.indexOf(this.couponType, event);
      this.ManagementTaskForm.month_mission_detail.level1_cash = this.couponData[index].coupon_price;
    },
    /** 每月任务二 */ 
    handleMonthLevel2Coupon(event, item) {
      let index = this.indexOf(this.couponType, event);
      this.ManagementTaskForm.month_mission_detail.level2_cash = this.couponData[index].coupon_price;
    },
    /** 每月任务三 */ 
    handleMonthLevel3Coupon(event, item) {
      let index = this.indexOf(this.couponType, event);
      this.ManagementTaskForm.month_mission_detail.level3_cash = this.couponData[index].coupon_price;
    },
    /** 每月任务四 */ 
    handleMonthLevel4Coupon(event, item) {
      let index = this.indexOf(this.couponType, event);
      this.ManagementTaskForm.month_mission_detail.level4_cash = this.couponData[index].coupon_price;
    },
    /**
      * @date 2021/01/27
      * @author kaiqiang
      * @description { 循环优惠卷, 拿到下标 }
    */
    indexOf(arr, item) {
      let arrLength = arr.length;    //储存数组的长度，以免重复使用arr.length
      for (let i = 0;i < arrLength;i++){
        if (arr[i].value === item) {
          return i;
        }
      }
      return -1;
    },
    /**
      * @date 2021/02/19
      * @author kaiqiang
      * @description { 监听每日下拉框选择的结果 }
    */
    handleSelectResult(event) {
      console.log(event)
      if (event === '0') {
        this.showSplicingEnding = true;
      } else {
        this.showSplicingEnding = false;
      }
    },
    /**
      * @date 2021/02/19
      * @author kaiqiang
      * @description { 监听每月下拉框的选择值 }
    */
    handleSelectMonthResult(event) {
      if (event === '0') {
        this.showMonthSplicingEnding = true;
      } else {
        this.showMonthSplicingEnding = false;
      }
    }
  }
}
</script>
<style type='text/scss' lang='scss' scoped>
.toolbar-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.el-select {
  width: 100%;
}
.el-input__inner {
  width: 100%;
}
.table-img {
  width: 150px;
  height: 150px;
  &:hover {
    cursor: pointer;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.task {
  padding: 10px 20px;
  margin-bottom: 10px;
  background:#F5F5F5;
}
</style>

<style>
  input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

